<template>
	<view class="component-page">
		<view class="page-header">
			<view class="back-button" @click="backToHome">
				<text class="back-icon">←</text>
				<text>返回</text>
			</view>
			<text class="page-title">实时音视频RTC</text>
		</view>
		
		<view class="demo-section">
			<view class="section-title">
				视频通话演示
			</view>
			
			<view class="rtc-container">
				<xl-rtc
					ref="rtcRef"
					:room-id="rtcRoomId"
					:user-name="rtcUserName" 
					:video-quality="rtcVideoQuality"
					@room-joined="onRtcRoomJoined"
					@room-left="onRtcRoomLeft"
				></xl-rtc>
			</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">功能特性</view>
			<view class="feature-list">
				<view class="feature-item">
					<view class="feature-icon">🌐</view>
					<view class="feature-info">
						<text class="feature-title">多平台适配</text>
						<text class="feature-desc">H5、小程序、App多端一致体验</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">🔊</view>
					<view class="feature-info">
						<text class="feature-title">高质量音视频</text>
						<text class="feature-desc">智能调节码率，适应不同网络环境</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">👥</view>
					<view class="feature-info">
						<text class="feature-title">多人音视频</text>
						<text class="feature-desc">支持一对一、多对多实时通话</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">🎮</view>
					<view class="feature-info">
						<text class="feature-title">丰富互动功能</text>
						<text class="feature-desc">屏幕共享、虚拟背景、美颜等功能</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import xlRtc from '@/components/xl-rtc/index.vue';

// 房间ID
const rtcRoomId = ref(`room_${Math.floor(Math.random() * 10000)}`);
// 用户名
const rtcUserName = ref(`user_${Math.floor(Math.random() * 10000)}`);
// 视频质量
const rtcVideoQuality = ref('medium');
// 组件引用
const rtcRef = ref(null);

// 返回首页
const backToHome = () => {
	uni.navigateBack();
};

// RTC房间加入成功
const onRtcRoomJoined = (data) => {
	uni.showToast({
		title: `已加入房间: ${data.roomId}`,
		icon: 'none'
	});
};

// RTC房间离开
const onRtcRoomLeft = (data) => {
	uni.showToast({
		title: `已离开房间: ${data.roomId}`,
		icon: 'none'
	});
};
</script>

<style lang="scss">
.component-page {
	padding: 30rpx;
	background-color: #f7f7f7;
	min-height: 100vh;
	box-sizing: border-box;
}

.page-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.back-button {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		margin-right: 20rpx;
		
		.back-icon {
			font-size: 36rpx;
			margin-right: 6rpx;
		}
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.demo-section {
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}

.rtc-container {
	height: 600rpx;
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	margin-bottom: 30rpx;
	
	.xl-rtc-container {
		height: 100%;
	}
}

.feature-list {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 10rpx 0;
	
	.feature-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.feature-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: linear-gradient(45deg, #2196f3, #21cbf3);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			margin-right: 24rpx;
		}
		
		.feature-info {
			flex: 1;
			
			.feature-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 6rpx;
				display: block;
			}
			
			.feature-desc {
				font-size: 26rpx;
				color: #666;
				display: block;
			}
		}
	}
}
</style> 